<!--
 * @Author: ZCL
 * @Date: 2020-05-19 13:59:47
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-19 13:59:47
-->
<template>
  <!-- 资产详情进入 领用 报修 转移 退还记录 -->
  <div class="record">
    <div>
      <van-list
        v-if="recordList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text="- 我是有底线的 -"
        @load="getInfoRecord"
        :offset="num"
        >
        <van-steps
          active-color="#38f"
          direction="vertical"
          active-icon="clock-o"
          inactive-icon="clock-o"
        >
          <van-step v-for="(item,index) in recordList" :key="index">
            <div class="time">{{ item.create_time }}</div>
            <div class="time-box">

              <div>
                <div class="box">
                  <p class="time-left">{{ $operate | handleGetTypeLabel }}部门:</p>
                  <p class="time-right">{{ item.dept_name }}</p>
                </div>
                <div class="box">
                  <p class="time-left">{{ $operate | handleGetTypeLabel}}人员:</p>
                  <p class="time-right">{{ item.user_name }}</p>
                </div>

                <!-- 转移记录 有接收人员 start-->
                <div class="box" v-if="$operate === OPERATE_TYPES.TRANSFER">
                  <p class="time-left">接收人员</p>
                  <p class="time-right">{{ item.ts_user_name || item.ts_dept_name }}</p>
                </div>
                <!-- 转移记录 有接收人员 end-->

                <div class="box">
                  <p class="time-left">{{ $operate | handleGetTypeLabel }}原因:</p>
                  <!-- 领用记录 原因-->
                  <p class="van-multi-ellipsis--l3 time-right" v-if="$operate === OPERATE_TYPES.RECEIVE">{{ item.re_reason }}</p>
                  <!-- 报修记录 原因 -->
                  <p class="van-multi-ellipsis--l3 time-right" v-if="$operate === OPERATE_TYPES.REPAIR">{{ item.rp_reason }}</p>
                  <!-- 转移记录 原因 -->
                  <p class="van-multi-ellipsis--l3 time-right" v-if="$operate === OPERATE_TYPES.TRANSFER">{{ item.ts_reason }}</p>
                  <!-- 退还记录 原因 -->
                  <p class="van-multi-ellipsis--l3 time-right" v-if="$operate === OPERATE_TYPES.RETURN">{{ item.ret_reason }}</p>
                </div>

                <!-- 报修记录 有图片 start -->
                <div class="box" v-if="item.repair && item.repair.length>0">
                  <p class="time-left">图片详情:</p>
                  <div class="time-right">
                    <div>
                      <van-image
                        v-for="(item2,index2) in item.repair"
                        :key="index2"
                        width="80px"
                        height="80px"
                        class="mr-10 mb-10"
                        :src="item2.ri_url"
                        @click="handleImagePreview(item2.ri_url)"
                      />
                    </div>
                  </div>
                </div>
                <!-- 报修记录 有图片 end -->
              </div>

            </div>
          </van-step>
        </van-steps>
      </van-list>
      <van-empty
        v-if="!recordList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无记录"
      />
    </div>

    <!-- 无数据 start -->
    <!-- <div class="" v-if="!recordList.length">
      <van-empty
        class="custom-image"
        :image="require('@/assets/icon/empty.png')"
        description="暂无数据~"
      />
    </div> -->
    <!-- 无数据 end -->

  </div>
</template>

<script>
import { OPERATE_TYPES } from '@/constant';
import { ImagePreview } from 'vant';

export default {
  name: 'Record',
  props: ['$operate'],
  data () {
    return {
      OPERATE_TYPES,
      type: '', // 领用 报修 转移 退还
      types: OPERATE_TYPES,
      page: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      recordList: [] // 记录列表
    };
  },
  methods: {
    // 资产详情页进入-获取记录
    getInfoRecord () {
      this.loading = true;
      let params = {
        id: this.$route.query.id
      };
      const { $operate } = this;
      // 领用记录
      if ($operate === OPERATE_TYPES.RECEIVE) {
        params.type = 1;
        this.$api.getReceiceInfoRecord(params).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.recordList = res.result;
            this.canLoadMore = false;
          }
        });
      // 报修记录
      } else if ($operate === OPERATE_TYPES.REPAIR) {
        this.$api.getRepairInfoRecord(params).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.recordList = res.result;
            this.canLoadMore = false;
          }
        });
      // 转移记录
      } else if ($operate === OPERATE_TYPES.TRANSFER) {
        this.loading = false;
        this.$api.getTransferInfoRecord(params).then(res => {
          if (res.code === 0) {
            this.recordList = res.result;
            this.canLoadMore = false;
          }
        });
      // 退还记录
      } else if ($operate === OPERATE_TYPES.RETURN) {
        this.loading = false;
        this.$api.getReturnInfoRecord(params).then(res => {
          if (res.code === 0) {
            this.recordList = res.result;
            this.canLoadMore = false;
          }
        });
      }
    },
    // 图片预览
    handleImagePreview (images) {
      const imgArr = [images];
      ImagePreview(imgArr);
    }
  },
  filters: {
    // type 转文字
    handleGetTypeLabel (type) {
      const labels = {
        [OPERATE_TYPES.RECEIVE]: '领用',
        [OPERATE_TYPES.REPAIR]: '报修',
        [OPERATE_TYPES.TRANSFER]: '转移',
        [OPERATE_TYPES.RETURN]: '退还'
      };
      return _.keys(labels).includes(type) ? labels[type] : '';
    }
  },
  created () {
    this.getInfoRecord(); // 资产详情进入-获取记录
  }
};
</script>

<style lang="scss" scoped>
.record {
  padding-bottom: 40px;
  background-color: #f8f9fd;
  ::v-deep.van-steps {
    background-color: #f8f9fd;
  }
  ::v-deep.van-step--vertical {
    padding-bottom: 0;
  }
  ::v-deep.van-icon {
    color: #0A8EFF !important;
    font-size: 16px;
  }
  ::v-deep.van-step__line {
    width: 1px;
  }
  .time {
    font-size: 12px;
    color: #717171;
  }
  .time-box {
    font-size: 13px;
    margin: 5px 10px 0 5px;
    padding: 12px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 0px 9px 2px rgba(221, 221, 221, 0.31);
    .box {
      display: flex;
      justify-content: flex-start;
      padding-bottom: 8px;
      .time-left {
        width: 60px;
        color: #AAAAAA;
      }
      .time-right {
        color: #2A2A2A;
        width: 232px;
      }
    }
    ::v-deep.van-multi-ellipsis--l3{
      width: 232px;
    }
    ::v-deep.van-button--small {
      height: 22px;
    }
    .title {
      font-size: 16px;
      color: #2A2A2A;
      padding: 5px 0 10px;
      margin-bottom: 15px;
      border-bottom: 1px solid #F5F5F5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-right {
        background-color: #F9C621;
        width: 36px;
        height: 22px;
        line-height: 22px;
        border-radius: 3px;
        color: #fff;
        font-size: 14px;
        text-align: center;
      }
    }
    .text-box {
      display: flex;
      color: #0A8EFF;
      .line {
        padding: 0 5px;
        color: #F2F2F2;
      }
    }
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
}
</style>
